{% load static %}
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>武汉加油</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="../static/vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="../static/vendor/font-awesome/css/font-awesome.min.css">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" href="../static/css/fontastic.css">
    <!-- Google fonts - Roboto -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <!-- jQuery Circle-->
    <link rel="stylesheet" href="../static/css/grasp_mobile_progress_circle-1.0.0.min.css">
    <!-- Custom Scrollbar-->
    <link rel="stylesheet" href="../static/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="../static/css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="../static/css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="../static/img/favicon.ico">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
        
        
		    <script>
		function myFunction(){
			alert("开发中，即将上线！");
		}
		</script>
  </head>
  <body>
    <!-- Side Navbar -->
    <nav class="side-navbar">
      <div class="side-navbar-wrapper">
        <!-- Sidebar Header    -->
        <div class="sidenav-header d-flex align-items-center justify-content-center"><h2>武汉加油</h2>
          <!-- User Info-->
          <!-- Small Brand information, appears on minimized sidebar-->
          <div class="sidenav-header-logo"><a href="index.html" class="brand-small text-center"> <strong></strong><strong class="text-primary"></strong></a></div>
        </div>
        <!-- Sidebar Navigation Menus-->
        <div class="main-menu">
          
          <ul id="side-main-menu" class="side-menu list-unstyled">                  
            <li><a href="../index.html"> <i class="icon-home"></i>首页                             </a></li>
            <li><a href="../tables.html"> <i class="icon-grid"></i>详细数据 </a></li>
            
            <li><a href="../charts.html"> <i class="fa fa-bar-chart"></i>数据分析                             </a></li>
            <li><a href="../index.html" onclick="myFunction()"> <i class="icon-interface-windows"></i>SARS对比                            </a></li>
            
            <li><a href="../index.html" onclick="myFunction()"> <i class="icon-form"></i>疫情预测                            </a></li>


        </div>

      </div>
    </nav>
    
    <div class="page">
      <!-- navbar-->
      <header class="header">
        <nav class="navbar">
          <div class="container-fluid">
            <div class="navbar-holder d-flex align-items-center justify-content-between">
              <div class="navbar-header"><a id="toggle-btn" href="#" class="menu-btn"><i class="icon-bars"> </i></a><a href="index.html" class="navbar-brand">
                  <div class="brand-text d-none d-md-inline-block"><span></span><strong class="text-primary">2019-nCoV安徽省疫情追踪</strong></div></a></div>
              <ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
                <!-- Notifications dropdown-->
                
                <!-- Languages dropdown    -->

                <!-- Log out-->
               
              </ul>
            </div>
          </div>
        </nav>
      </header>
      

      <section class="charts">
        <div class="container-fluid">
          <!-- Page Header-->
          <header> 
            <h1 class="h3 display">疫情数据可视化           </h1>
          </header>
          <div class="row">
            <div class="col-lg-6">
              <div class="card line-chart-example">
                <div class="card-header d-flex align-items-center">
                  <h4>全国疫情数据增量</h4>
                </div>
                <div class="card-body">
                   <div id="container" style="height: 350px"></div>
                </div>
              </div>
            </div>
            <div class="col-lg-6">
              <div class="card bar-chart-example">
                <div class="card-header d-flex align-items-center">
                  <h4>全国vs鄂外确诊增长</h4>
                </div>
                <div class="card-body">
                  <iframe width="550" height="340" frameborder="0" src="../static/line.html"></iframe>
                </div>
              </div>
            </div>
            
            
            
            <div class="col-lg-6">
              <div class="card pie-chart-example">
                <div class="card-header d-flex align-items-center">
                  <h4>全国病情分步</h4>
                </div>
                <div class="card-body">
                  <div class="chart-container">
                     <iframe width="550" height="300" frameborder="0" src="../static/pie1.html"></iframe>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-6">
              <div class="card polar-chart-example">
                <div class="card-header d-flex align-items-center">
                  <h4>鄂外病情分步</h4>
                </div>
                <div class="card-body">
                  <div class="chart-container">
                    <iframe width="550" height="300" frameborder="0" src="../static/pie2.html"></iframe>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </section>

      <footer class="main-footer">
        <div class="container-fluid">
          <div class="row">
            <div class="col-sm-6">
              <p>联系:huanshuo0801@gmail.com   请勿用于商业用途</p>
            </div>
            
              
            
          </div>
        </div>
      </footer>
     </div>
     
    <!-- JavaScript files-->
    
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>




              <script type="text/javascript">
              var dom = document.getElementById("container");
              var myChart = echarts.init(dom);
              var app = {};
              option = null;
              option = {
                  tooltip: {
                      trigger: 'axis',
                      axisPointer: {
                          type: 'cross',
                          crossStyle: {
                              color: '#999'
                          }
                      }
                  },
                  toolbox: {
                      feature: {
                          dataView: {show: true, readOnly: false},
                          magicType: {show: true, type: ['line', 'bar']},
                          restore: {show: true},
                          saveAsImage: {show: true}
                      }
                  },
                  legend: {
                      data: ['新增确诊', '新增疑似', '新增治愈']
                  },
                  xAxis: [
                      {
                          type: 'category',
                          data: ['1/25', '1/26', '1/27', '1/28', '1/29', '1/30','1/31',
                          '2/1','2/2','2/3','2/4','2/5','2/6'],
                          axisPointer: {
                              type: 'shadow'
                          }
                      }
                  ],
                  yAxis: [
                      {
                          type: 'value',
                          name: '人数',splitLine: {
                              show: false 
                          }


                      },
                      {
                          type: 'value',
                          name: '新增治愈',splitLine: {
                              show: false 
                          }

                      }
                  ],
                  series: [
                      {
                          name: '新增确诊',
                          type: 'bar',
                          data: [511,668,781,1773,1465,2054,1662,2090,2589,2851,3189,3904,3626]
                      },
                      {
                          name: '新增疑似',
                          type: 'bar',

                                              itemStyle:{
                                                  normal:{
                                                      color:'	#FFA07A'
                                                  }},

                          data: [956,660,3102,1179,2266,2928,3071,2750,1556,2014,1656,46,1442]
                      },
                      
                      {
                          name: '新增治愈',
                          type: 'bar',
                          itemStyle:{
                                                  normal:{
                                                      color:'	#90EE90'
                                                  }},
                          yAxisIndex: 1,
                          data: [3,10,7,17,46,16,51,89,155,91,197,301,134]
                      }
                
                      
                  ]
              };
              ;
              if (option && typeof option === "object") {
                  myChart.setOption(option, true);
              }
                     </script>






    
    
    
    
    
    
    
    
    
    
    
    
    <script src="../static/vendor/jquery/jquery.min.js"></script>
    <script src="../static/vendor/popper.js/umd/popper.min.js"> </script>
    <script src="../static/vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="../static/js/grasp_mobile_progress_circle-1.0.0.min.js"></script>
    <script src="../static/vendor/jquery.cookie/jquery.cookie.js"> </script>
    <script src="../static/vendor/chart.js/Chart.min.js"></script>
    <script src="../static/vendor/jquery-validation/jquery.validate.min.js"></script>
    <script src="../static/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="../static/js/charts-home.js"></script>
    <!-- Main File-->
    <script src="../static/js/front.js"></script>
  </body>
</html>